<template>
  <div>
  <div class="shop_container">
    <h2>欢迎来到Flora花市</h2>
    <el-form v-model="searchForm" :inline="true">
      <el-row>
        <el-col :span="6" :offset="1" >
          <el-form-item label="商品名："prop="title" style="margin-left: 0px;">
            <el-input v-model="searchForm.title" placeholder="请输入商品名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家名："prop="created_user">
            <el-input v-model="created_user_name" placeholder="请输入商家名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品类型：" prop="category" style="margin: 0;padding: 0 ">
            <el-select v-model="searchForm.category_id" placeholder="请选择商品类型" clearable>
              <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getProductList()">查询</el-button>
      </el-row>
      <el-row>
        <el-col :span="6"style="margin-left: 100px"  v-for="(item,index) in productList" :key="'product'+index">
          <div class="rightListBox">
            <section @click="showProductDetail(item.id)">
              <div>
                <el-form>
                  <el-row>
                    <el-form-item style="margin-top: 20px;margin-bottom: 0">
                      <img v-if="item.image" :src="item.image" width="220" height="230">
                      <img v-else src="../../../assets/img/bgImg/plants1.png"width="220" height="230">
                    </el-form-item>
                  </el-row>
                  <el-row type="flex" justify="left">
                    <el-form-item style="margin-bottom: 0;margin-left: 0">
                      <div style="text-align: left">{{item.title}}
                      </div>
                    </el-form-item>
                  </el-row>
                  <el-row type="flex" justify="left">
                    <el-form-item style="margin-bottom: 0;margin-left: 0">
                      <div style="text-align: left">{{item.sellPoint}}
                      </div>
                    </el-form-item>
                  </el-row>
                  <el-row type="flex" justify="left">
                    <el-form-item style="margin-bottom: 0;margin-left: 0">
                      <div style="text-align: left;color: #ff852f" >￥{{ item.price }}</div>
                    </el-form-item>
                  </el-row>
                  <el-row type="flex" justify="end">
                    <el-col>
                      <el-form-item>
                        <el-button style="" type="warning" @click="$refs.productDetailDialog.open(item)">查看详情</el-button>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item>
                        <el-button style="" type="success" @click="buyProduct(item)">点击下单</el-button>
                      </el-form-item></el-col>
                  </el-row>
                </el-form>
              </div>
            </section>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
    <product-detail-dialog ref="productDetailDialog" title="查看商品"></product-detail-dialog>
  </div>
</template>

<script>
import {addOrder, getProductCategoryList, getProductList, getSeller, updateProduct} from "@/api/shop";
import ProductDetailDialog from "@/components/page/shop/ProductDetail";
export default {
  components:{
    ProductDetailDialog
  },
  name: "Shop",
  data(){
    return{
      created_user_name:'',
      searchForm:{
        title: '',
        category_id:'',
        created_user_id:'',
      },
      order:{
        orderId:'',
        userId:'',
        productId:'',
        sellerId:'',
        recvName:'',
        recvPhone:'',
        recvProvince:'',
        recvCity:'',
        recvArea:'',
        recvAddress:'',
        totalPrice:'',
        status:'',
        orderTime:'',
        payTime:'',
      },
      // proForm: {},
      //   id: '',
      //   title:'',
      //   sell_point:'',
      //   price:'',
      //   num:'',
      //   //introduction:'',
      //   status:'',
      //   priority:'',
      //   category_id:'',
      //   created_user_id:'',
      //   image:'',
      //   remark:''
      // },
      categoryList:[],
      productList:[],
      productData:'',
      sendTime:''
    }
  },
  mounted() {
    this.format()
  },
  created() {
    //getProductCategoryList();
    this.routeChange()
  },
  mouseEnter (data) {
    console.log("hhwhkauda",data)
    this.productData = Object.assign({}, data)
  },
  methods:{
    format() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      const newmonth = date.month > 9 ? date.month : '0' + date.month
      const day = date.date > 9 ? date.date : '0' + date.date
      this.sendTime = date.year + '.' + newmonth + '.' + day

    },
    showProductDetail(data){//根据商品id显示对应的细节信息

    },
    getSellerId(name){
      if(name!=''){
        console.log("sellerName:",name)
        getSeller(name).then(res => {
          console.log(res)
          this.searchForm.created_user_id=res.id
        })
      }else {
        this.searchForm.created_user_id=''
      }
    },
    getAllCategory(){
      //console.log("hesakbuewnla")
      getProductCategoryList().then((res) =>{
        console.log(res)
        this.categoryList=res

      })
    },
    getProductList(){
      this.getSellerId(this.created_user_name)
      console.log(this.searchForm)
      getProductList(this.searchForm).then(res =>{

        console.log("productlist",res.records)
        this.productList=res.records
      })
    },
    routeChange(){
      this.getAllCategory();
      // this.getSellerId(this.created_user_name)
      this.getProductList(this.searchForm);
    },
    buyProduct(item){
      this.$confirm('确认下单吗？', '是否下单', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        lockScroll: false,
        type: 'warning'
      }).then(() => {
        this.addOrder(item);
      })

    },
    addOrder(item){
      console.log("henks")
      var order=this.order;
      order.productId=item.id
      order.userId=JSON.parse(localStorage.getItem("userInfo")).id

      order.sellerId=item.createdUserId
      order.totalPrice=item.price
      order.orderTime=this.sendTime
      addOrder(order).then(res =>{
          var pro=item;
          pro.status=1;//表示已下单
          updateProduct(pro).then(res=>{
            this.routeChange()
          })
     })

    }
  }

}
</script>

<style scoped>
.el-form-item label:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.el-form-item__label {
  text-align: justify;
  height: 50px;
}

.el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}

</style>